<template>
    <div style="overflow: hidden;padding-bottom: 1rem;" >
        <header class="fixed" v-show="scrollFlag">
            <i class="icon iconfont icon-toutiaoyoujiantou icon-left" @click="routerBack"></i>
            <div class="text">
                <div :class="[0].includes(top_acitve) ? 'text_div top_active ': 'text_div'">商品</div>
                <div :class="[1].includes(top_acitve) ? 'text_div top_active ': 'text_div'" @click="xq">详情</div>
                <div :class="[2].includes(top_acitve) ? 'text_div top_active': 'text_div'" @click="tj">推荐</div>
            </div>
            <i class="icon iconfont icon-toutiaofenxiang2 icon-right" @click="showShare = true"></i>
        </header>
        <header class="header" v-show="!scrollFlag">
            <i class="icon iconfont icon-toutiaoyoujiantou icon-left" @click="routerBack"></i>
            <i class="icon iconfont icon-toutiaofenxiang2 icon-right" @click="showShare = true"></i>
        </header>
        <div class="swiper" style="margin-top: 44px">
            <van-swipe>
                <van-swipe-item><img :src="goods_info.image_url" alt=""></van-swipe-item>
                <template #indicator="{ active, total }" >
                    <div class="custom-indicator" v-show="goods_info.showFlag">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>
        <div class="pro_info">
            <div class="info">
                <div class="price">￥9999</div>
                <h3>小米{{ id }}</h3>
                <p>{{ goods_info.tags }}</p>
            </div>
            <div class="goodsinfo">
                <div class="type">
                    <div>送至</div>
                    <div class="dizhi">
                        <i class="icon iconfont icon-toutiaoshouji"></i>
                        <div>xx市 xx区</div>
                        <span>有现货</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="pro_detail">
            <van-tabs v-model:active="active" class="js">
                <van-tab title="商品介绍">暂无数据</van-tab>
                <van-tab title="商品参数">暂无,数据</van-tab>
            </van-tabs>
        </div>

        <div class="pro_recommend">
            <div class="title">商品推荐 :</div>
            <div class="goods_info">
                <van-row justify="space-between">
                  <van-col span="12" v-for="(item,index) in newGoods_info" :key="index">
                    <van-image
                            width="3rem"
                            height="4rem"
                            fit="cover"
                            :src="item.image_url"
                    />
                    <div class="goood_name">{{ item.name }}</div>
                    <div class="good_price">￥{{ item.price }}</div>
                  </van-col>
                </van-row>
            </div>
        </div>
        <van-share-sheet
                v-model:show="showShare"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
        />
        <!--回顶按钮 -->
        <div class="btn_top" v-show="scrollValue>500" @click="gotop">
            ↑
        </div>
        <!-- 底部购物 -->
        <van-action-bar>
          <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
          <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
          <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
          <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
        </van-action-bar>
    </div>
</template>

<script>
    import {defineComponent, ref, onMounted, onBeforeMount} from 'vue'
    import {Toast} from 'vant'
    import {useRoute, useRouter} from 'vue-router'
    import {getAllTopCategories} from '../../api/category'

    export default defineComponent({
        setup() {
            // 分享区域
            const showShare = ref(false);
            const options = [
                {name: '微信', icon: 'wechat'},
                {name: '微博', icon: 'weibo'},
                {name: '复制链接', icon: 'link'},
                {name: '分享海报', icon: 'poster'},
                {name: '二维码', icon: 'qrcode'},
            ];
            const onSelect = (option) => {
                Toast(option.name);
                showShare.value = false;
            };
            let top_acitve = ref(0)
            // 获取图片
            let goods_info = ref({})
            let newGoods_info = ref([])
            let topPX = []
            onMounted(() => {
                window.addEventListener('scroll', scorllTOP)
                getBaseData()
                topPX = [
                    getOffsetTop('.swiper'),
                    getOffsetTop('.pro_detail'),
                    getOffsetTop('.pro_recommend'),
                ]
                console.log('topPX',topPX)
            })
            // 页面回退
            const router = useRouter()

            function routerBack() {
                router.go(-1)
            }
            // 点击到对应位置
            let tz = ref(0)
            function xq (){
                const timer = setInterval(() => {
                   tz.value+= topPX[1]/5
                   document.documentElement.scrollTop = tz.value
                    if(timer && document.documentElement.scrollTop >=topPX[1]){
                        clearInterval(timer)
                        tz.value = 0
                    }
                }, 50);
            }
            function tj(){
                const timer = setInterval(() => {
                   tz.value+= topPX[2]/5
                   document.documentElement.scrollTop = tz.value
                    if(timer && document.documentElement.scrollTop>=topPX[2]){
                        clearInterval(timer)
                        tz.value = 0
                    }
                }, 50);
            }
            // 获取页面路由跳转获取的值
            const route = useRoute()
            let id = route.params.id
            let scrollFlag = ref(false)
            let scrollValue = ref(0)
            // 页面头部滚动事件
            function scorllTOP() {
                 scrollValue.value = document.documentElement.scrollTop || window.pageYOffset
                if (scrollValue.value > 40) {
                    scrollFlag.value = true
                } else {
                    scrollFlag.value = false
                }
                if (scrollValue.value >= 0 && scrollValue.value < topPX[1]) {
                    top_acitve.value = 0
                } else if (scrollValue.value >= topPX[1] && scrollValue.value < topPX[2]) {
                    top_acitve.value = 1
                }  else if (scrollValue.value >= topPX[2]) {
                    top_acitve.value = 2
                }

            }

            // 回到顶部事件
            function gotop() {
                var timer = setInterval(function () {
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    this.isTop = true;
                    if (osTop === 0) {
                        clearInterval(timer);
                    }
                }, 10)
            }

            // 导航栏滚动高度高亮效果

            const getBaseData = async () => {
                goods_info.value = {}
                let {data} = await getAllTopCategories()
                if (data && data.length > 0) {
                    const products = data[0].products || []
                    products.forEach(g => {
                        g.showFlag = g.total > 0
                    })
                    goods_info.value = products[0]
                    newGoods_info.value = products.filter((item, index) => index != 0)
                }

            }
            /**
             * 获取元素偏移高度
             * @param className
             * @returns {number}
             */
            const getOffsetTop = (className) => {
                return document.querySelector(className).offsetTop;
            };
            // 购物部分按钮
            function onClickIcon(){
                router.push('/cart')
            }
            return {
                top_acitve,
                id,
                routerBack,
                scrollFlag,
                options,
                onSelect,
                scrollValue,
                showShare,
                goods_info,
                newGoods_info,
                gotop,
                getBaseData,
                xq,
                tj,
                onClickIcon
            }
        }
    })
</script>

<style lang="scss">
    .van-swipe-item {
        font-size: 16px;
        text-align: center;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100vw;
        height: 44px;
        position: absolute;
        top: 0;
        left: 0;

        .icon {
            width: 0.8rem;
            height: 0.8rem;
            font-size: 0.63rem;
            position: relative;
            text-align: center;
            border-radius: 50%;
            color: #f5f5f5;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .icon-left {
            left: 0.4rem;
        }

        .icon-right {
            right: 0.4rem;
        }
    }

    .fixed {
        position: fixed;
        transition: all 0.3s ease;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 44px;
        height: 44px;
        background-color: #f5f5f5;
        text-align: center;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        align-items: center;
        z-index: 10;

        .icon {
            font-size: 25px;
            padding: 0 15px 0 15px;
        }

        .text {
            width: 50%;
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            .text_div{
                position: relative;
            }
            .top_active{
                color: #ff6700;
            }
            .top_active:after{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                content: "";
                width: 20px;
                height: 3px;
                bottom: 0;
                background-color: #ff6700;
                border-radius: 0.5rem;
            }
        }


    }

    .swiper {
        margin-bottom: 1.8rem;
    }

    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    .info {
        padding: 2.66667vw;

        .price {
            font-size: 5.33333vw;
            color: #ff6700;
        }

        h3 {
            margin: 0;
            font-size: 18px;
        }

        p {
            margin: 0;
            text-indent: 1em;
            font-size: 3.2vw;
        }
    }

    .goodsinfo {
        margin: 5px 20px;
        width: 100%;
        font-size: 15px;

        .type {
            display: flex;
        }

        .dizhi {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ddd;
            width: 60%;
        }
    }

    p {
        font-size: 16px;
    }

    .van-tabs__content {
        height: 55vw;
        text-align: center;
        line-height: 55vw;
        font-size: 16px;
    }

    .title {
        font-size: 20px;
    }

    .goood_name {
        color: #333;
        font-size: 14px;
    }

    .good_price {
        font-size: 14px;
        color: #ea625b;
    }

    .goods_info {
        padding: 0.6rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
    }

    .btn_top {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        position: fixed;
        bottom: 20px;
        right: 0;
        font-size: 20px;
        text-align: center;
        background-color: #ea625b;
    }

    .gl {
        color: #ea625b;
    }
</style>
